<template>
	<view class="demo">
		<view class="tops">
			<u-search v-model="names" style="width: 90vw;height: 5vh;" placeholder="请输入修改后的昵称" bgColor="#ffffff"
				:clearabled="true" :showAction="shows" label="昵称" searchIcon="  "></u-search>
		</view>
		<view class="centers">
			<h3 style="font-size: 5vw;color: black;">修改须知</h3>
			<p>1. 昵称必须在4-10个字以内可以包含数字，中文，英文等字符。</p>
			<p>2. 15天内只能修改一次。</p>
			<p>3. 请勿带有辱骂，广告，诱导等其他违反法规的词汇，违者账号将被封禁处理</p>
		</view>
		<button style="width: 100%;height: 10vw;font-size: 4vw;background-color: #ffffff;margin-top: 40vh;"
			@click="onclicks">点击修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shows: false,
				names: ""
			}
		},
		methods: {
			onclicks() {
				console.log(this.names)

				if (this.names != []) {
					let data = {
						nickname: this.names
					}

					uni.request({
						url: '/api/system/update_nickname',
						method: "POST",
						header: {
							'content-Type': 'application/json',
							token: uni.getStorageSync('token')
						},
						data: data,
						success(res) {
							console.log(res)
							if (res.data.msg == "修改成功") {
								uni.showToast({
									title: '修改成功',
									icon: 'success',
									duration: 2000 //持续的时间
								})
							} else {
								uni.showToast({
									title: '修改失败',
									icon: 'loading',
									duration: 2000 //持续的时间
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style>
	.demo {
		width: 100vw;
		height: 90vh;
		background-color: #f6f9fc;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
	}

	.tops {
		width: 100%;
		height: 30vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
	}

	.centers {
		width: 90%;
		height: 15vh;
		font-size: 3vw;
		color: #ccc;
	}
</style>